/* @flow */
'use strict';
import {
    StyleSheet,
    View,
    Navigator,
    Text,
    TouchableOpacity,
    TouchableHighlight,
    AsyncStorage,
    AlertIOS,
} from 'react-native';
import React from 'react';
import URL from '../config/server';
import {Utils} from '../config/utils';
import tcomb from  'tcomb-form-native';
import Icon from 'react-native-vector-icons/Ionicons';
var Form = tcomb.form.Form;
var Phone = tcomb.refinement(tcomb.String, function (value) {
    var Reg = /^1\d{10}$/;
    return Reg.test(value);
});

var User = tcomb.struct({
    phone: Phone
});

var options = {
    auto: 'placeholders',
    fields: {
        phone: {
            placeholder: '请输入您的手机号',
            error: '请输入正确的手机号码！'
        }
    }
};

var NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
                              onPress={() => navigator.parentNavigator.pop()}>
                <View style={{flexDirection:'row',padding:5}}>
                    <Icon name="ios-arrow-back" size={18} color="#ffffff" style={{alignSelf:'center'}} />
                    <Text style={{color: 'white', margin: 3,fontSize:16}}>
                        返回
                    </Text>
                </View>
            </TouchableOpacity>
        );
    },
    RightButton(route, navigator, index, navState) {
        return null;
    },
    Title(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
                <Text style={{color: 'white', margin: 10, fontSize: 20}}>
                    找回密码
                </Text>
            </TouchableOpacity>
        );
    }
};

export default class RegPhone extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: {
                username: '',
                password: ''
            }
        };
    }

    isExist(phone){
        var REQUEST_URL=URL.isExist+phone+'/0';
        fetch(REQUEST_URL, {
            method: "GET",
            mode: 'no-cors'
        }).then((response) => response.json())
            .then((responseData) => {
                if(!responseData){
                    this.props.navigator.push({
                        id: 'FindByPhone2',
                        message:phone
                    })
                }else{
                    AlertIOS.alert(
                        '温馨提示',
                        '未找到手机号!'
                    )
                }
            }).catch(function (e) {
                AlertIOS.alert(
                    '温馨提示',
                    '网络连接错误，请关闭飞行模式或检查您的网络连接。'
                )
            })
            .done();
    }

    onPress() {
        var value = this.refs.main.refs.form.getValue();
        if (value) {
            this.isExist(value.phone);
        }
    }

    renderScene(route, navigator) {
        return (
            <View style={styles.container}>
                <Form
                    ref='form'
                    type={User}
                    options={options}
                    value={this.state.value}
                />
                <TouchableHighlight style={styles.button} onPress={this.onPress.bind(this)} underlayColor='#e02820'>
                    <Text style={styles.buttonText}>下一步</Text>
                </TouchableHighlight>
            </View>
        );
    }


    render() {
        return (
            <Navigator
                ref='main'
                renderScene={this.renderScene.bind(this)}
                navigator={this.props.navigator}
                navigationBar={
            <Navigator.NavigationBar
                ref='main'
                style={{backgroundColor: '#e02820', alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          	}/>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        marginTop: 100,
        justifyContent: 'center',
        padding: 20,
        backgroundColor: '#ffffff'
    },
    logo: {
        flex: 1,
        alignSelf: 'center',
        marginTop: 20
    },
    title: {
        fontSize: 25,
        alignSelf: 'center',
        marginBottom: 15,
        marginTop: 15
    },
    buttonText: {
        fontSize: 18,
        color: 'white',
        alignSelf: 'center'
    },
    button: {
        height: 36,
        backgroundColor: '#e02820',
        borderColor: '#e02820',
        borderWidth: 1,
        borderRadius: 8,
        marginBottom: 10,
        alignSelf: 'stretch',
        justifyContent: 'center'
    },
    findPwdText: {
        fontSize: 15,
        textDecorationLine: 'underline',
        textAlign: 'right'
    }
});

